<template>
	<view class="index-container">
		<!-- 搜索组件 S-->
		<mySearch v-if="searchShow"></mySearch>
		<!-- 搜索组件 E-->
		<!-- 轮播图 S -->
		<swiper class="banner">
			<swiper-item  v-for="item in banner" :key="item.id">
				<navigator :url="'/pkgGood/detail/detail?id='+item.goods_id">
					<image class="img" mode="widthFix" :src="item.image_url"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 轮播图 E -->
		<!-- 通知组件 S -->
		<u-notice-bar :text="notice"></u-notice-bar>
		<!-- 通知组件 E-->
		<!-- 菜单区域 S -->
		<u-grid :border="false" col="5">
		    <u-grid-item @click="goCate(item.id)" v-for="item in channel" :key="item.id">
		        <image class="menuImg" mode="widthFix" :src="item.icon_url"></image>
		        <text class="menuText">{{item.name}}</text>
		    </u-grid-item>
		</u-grid>
		<!-- 菜单区域 E -->
		<!-- 商品分类 S -->
		<view class="goodContainer"  v-for="item in categoryList" :key="item.id">
		    <view class="titleBox">
				<text @click="goCate(item.id)">{{item.name}}</text>
		    </view>
		    <!-- 商品列表 S-->
		    <goodList :list="item.goodsList" :desc="true"></goodList>
		    <!-- 商品列表 E-->
		</view>
		<!-- 商品分类 E -->
	</view>
</template>
<script>
	import setBadge from '@/mixins/setBadge.js'
	export default {
		mixins:[setBadge],
		name:'Index',
		data() {
			return {
			  // 1. 定义相关数据变量
				banner:[],
				categoryList:[],
				channel:[],
				notice:'',
				// 控制搜索组件显示
				searchShow:false
			}
		},
		onShow() {
			// 3. 每次打开的时候都更新数据
			this.getIndexData()
			// 搜索组件被创建了
			this.searchShow = true
		},
		onHide(){
			// 搜索组件关闭了
			this.searchShow = false
		},
		methods: {
			// 2. 定义请求方法
			async getIndexData(){
				// 请求数据
				let res = await uni.$http.get('/index/appInfo')
				// 赋值
				this.banner = res.banner
				this.categoryList = res.categoryList
				this.channel = res.channel
				// 处理notice
				this.notice = res.notice.map((item,index)=> (index+1)+'.'+item.content).join(' ')
			},
			// 跳转分类页面
			goCate(cateId){
				// cateId 就是点击的分类ID，也就是分类页面左侧要高亮的信息
				uni.setStorageSync('cateId',cateId)
				// 跳转界面
				uni.switchTab({
					url:'/pages/cate/cate'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.banner{
		.img{
			width: 100%;
		}
	}
	.menuImg{
		width: 80rpx;
	}
	.menuText {
		color: #888;
	}
	.titleBox{
		margin: 10rpx 0;
		background-color: #fafafa;
		padding: 20rpx 0;
		box-sizing: border-box;
		text-align: center;
		text{
			display: inline-block;
			border-bottom: 4rpx solid #409eff;
			color: #333;
			font-size: 28rpx;
		}
	}
	.goodContainer{
		padding: 0 20rpx;
	}
</style>